<template>
    <div class="activity_container container">
        <search-bar  :placeholder="placeholder"  :pageParam="pageParamObj" :url="url" :inputPlaceholder="inputPlaceholder"></search-bar>
        <div class="img_container">
            <mt-swipe :auto="8000" v-if="bannerList.length !==0">
                <mt-swipe-item v-for="(item) in bannerList" :key="item.id" @click.native="turnToPage(item.id)">
                    <div  class="carousel">
                        <img :src="item.attachments" alt="">
                        <p> {{item.theme}}</p>
                    </div>
                </mt-swipe-item>
            </mt-swipe>
        </div>


        <mt-navbar v-model="selected" @click.native="tabChange">
            <mt-tab-item id="all">全部活动 <span class="num">({{allCount}})</span></mt-tab-item>
            <mt-tab-item id="oncoming">预告活动<span class="num">({{oncomingCount}})</span></mt-tab-item>
            <mt-tab-item id="past">历史活动<span class="num">({{pastCount}})</span></mt-tab-item>
        </mt-navbar>
        <div class="top_bg">
            <img src="../assets/img/u147.jpg" alt="">
        </div>
        <mt-tab-container v-model="selected">
            <mt-tab-container-item id="all">

                <div class="main-body">
                    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore"
                                 :autoFill="isAutoFill">
                        <ul class="mui-table-view mui-grid-view list_ul">
                            <li v-for="(item,index) in listData" :key="item.id"
                                class="list-item " data-type="0">
                                <div class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd"
                                     @click="turnToPage(item.id)">
                                    <div class="img_box">
                                        <img :src="item.attachments " alt="">
                                    </div>
                                    <div class="content ">
                                        <h3>{{item.theme}}</h3>
                                        <p class="detail">{{item.description }}</p>
                                        <p class="time">{{item.activityDate}}</p>
                                    </div>
                                    <div class="delete" @click.stop="deleteItem" :data-index="index">删除</div>
                                </div>
                            </li>
                        </ul>
                    </mt-loadmore>
                </div>
            </mt-tab-container-item>


            <mt-tab-container-item id="oncoming">
                <div class="main-body">

                    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore1"
                                 :autoFill="isAutoFill">
                        <ul class="mui-table-view mui-grid-view list_ul">
                            <li v-for="(item,index) in listData" :key="item.id"
                                @click="turnToPage(item.id)" class="list-item " data-type="0">
                                <div class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd"
                                     @click="turnToPage(item.id)">
                                    <div class="img_box">
                                        <img :src="item.attachments " alt="">
                                    </div>
                                    <div class="content ">
                                        <h3>{{item.theme}}</h3>
                                        <p class="detail">{{item.description }}</p>
                                        <p class="time">{{item.activityDate}}</p>
                                    </div>
                                    <div class="delete" @click.stop="deleteItem" :data-index="index">删除</div>
                                </div>
                            </li>
                        </ul>
                    </mt-loadmore>
                </div>
            </mt-tab-container-item>
            <mt-tab-container-item id="past">
                <div class="main-body">

                    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore2"
                                 :autoFill="isAutoFill">

                        <ul class="mui-table-view mui-grid-view list_ul">

                            <li v-for="(item,index) in listData" :key="item.id"
                                @click="turnToPage(item.id)" class="list-item " data-type="0">
                                <div class="list-box" @touchstart.capture="touchStart" @touchend.capture="touchEnd"
                                     @click="turnToPage(item.id)">

                                    <div class="content ">
                                        <h3>{{item.theme}}</h3>
                                        <p class="detail">{{item.description }}</p>
                                        <p class="time">{{item.activityDate}}</p>
                                    </div>
                                    <div class="img_box" style="margin-left: 0">
                                        <img :src="item.attachments " alt="">
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </mt-loadmore>
                </div>
            </mt-tab-container-item>
        </mt-tab-container>
    </div>


</template>

<script>
    import searchBar from '@/components/searchBar'
    import BASE_URL from '@/api/url'
    import {slide,pullDown} from './common/mixin'

    export default {
        name: "activity",
        mixins:[slide,pullDown],
        components: {searchBar},
        data() {
            return {
                selected: 'all',
                placeholder: '党建活动',
                url:'/weixin/activity/list',
                pageParam: {
                    type: 'all',
                    page: 1,
                    size: 10,
                    theme: ''
                },
                inputPlaceholder:'搜索活动名称',
                pageParamObj: {
                    page: 1,
                    size: 10,
                    theme: '',
                    type: 'all',
                },
                bannerList:[],
                listData: [],
                //可以进行上拉
                allLoaded: false,
                wrapperHeight: 0,
                totalNum: null,
                //是否自动触发上拉函数
                isAutoFill: false,
                allCount: null,
                oncomingCount: null,
                pastCount: null,
                startX: 0,
                endX: 0,
                pageType:'activity',
                description:''

            }
        },
        activated(){
            this.fetchData();
            this.$get('/weixin/activity/getCount').then(data => {
                this.allCount = data.data.allCount;
                this.oncomingCount = data.data.oncomingCount;
                this.pastCount = data.data.pastCount;
                this.getBanner();
            })
        },
        created() {
            document.title = '党建活动';
            this.getBanner();
            this.$get('/weixin/activity/getCount').then(data => {
                this.allCount = data.data.allCount;
                this.oncomingCount = data.data.oncomingCount;
                this.pastCount = data.data.pastCount;
            })
        },
        mounted() {
            this.fetchData();
        },

        methods: {
            fetchData() {
                this.$get('/weixin/activity/list', this.pageParam).then(data => {
                    if (!(data.data.totalNum > data.data.currentPage * data.data.pageSize)) {
                        this.allLoaded = true; // 若数据已全部获取完毕
                    }
                    this.listData = data.data.items.map((item) => {
                        return {
                            activityDate: item.activityDate,
                            attachments: `${BASE_URL}/${item.attachments}`,
                            browseCount: item.browseCount,
                            id: item.id,
                            theme: item.theme,
                            description: item.description,
                            praiseCount: item.praiseCount
                        }
                    });
                })
            },

    },
    }
</script>
<style scoped>


</style>

<style lang="less">

    .activity_container .mint-navbar {
        padding: 0 0.7rem !important;
    }
</style>